<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  input {
    width: 300px;
    height: 30px;
    border: 1px solid black;
    border-radius: 5px;
    padding-left: 10px;
    display: inline-block;
  }

  div {
    margin-top: 15px;
    width: 260px;
    height: 30px;
  }

  span {
    color: blue;
    font-size: 12px;
    display: block;
    float: right;
    margin-top: 5px;
  }

  button {
    width: 300px;
    height: 35px;
    background-color: blue;
    border: 1px solid blue;
    border-radius: 5px;
    color: white;
    font-weight: 800;
    box-sizing: border-box;
  }
</style>

<body>
  <div>
    <input type="text" placeholder="手机号/用户名/邮箱">
  </div>
  <div class="a">
    <input type="password" placeholder="密码">
    <span>忘记密码</span>
  </div>
  <button>登录</button>
  <script>
    function ajax(method, url, parmas, cb) {
      var str = ''
      for (var key in parmas) {
        str += `${key}=${parmas[key]}&`;
      }
      var strs = str.slice(0, str.length - 1)
      console.log(strs);
      var xhr = new XMLHttpRequest()
      xhr.open(method, method == 'get' ? url + "?" + strs : url);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          cb(JSON.parse(xhr.responseText))
        }
      }
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
      xhr.send(method == 'get' ? null : strs);
    }
    var btn = document.querySelector('button')
    var inputs = document.querySelectorAll('input')
    btn.onclick = function () {
      if (inputs[0].value && inputs[1].value) {
        if (/^\d{4}$/.test(inputs[1].value)) {
          ajax('get', 'https://yantianfeng.com/api/login', { username: inputs[0].value, password: inputs[1].value }, function (data) {
            //console.log(data);
            if (data.code == 200) {
              console.log('登陆成功');
            } else {
              console.log('登陆失败!');
            }
          })
        } else {
          alert('请输入正确的手机号/密码')
        }
      } else {
        alert('用户名/密码不能为空!')
      }
    }
  </script>
</body>

</html>